<script lang="ts" setup>
import { useAdminProgramStore } from '../store/adminProgram'
import { apiUrl, post } from '@/utils/api'
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'
import { rules } from '../attribute/rules'
import { MessagePlugin } from 'tdesign-vue-next'

const store = useAdminProgramStore()
const { saveDialogVisible, imageUploadData, downloadUploadData, saveMode } = storeToRefs(store)
const { getData, formData } = store

const actionUrl = apiUrl('/api/upload/single')
const requestUrl = computed(() => {
  return saveMode.value === 'add' ? '/api/program/insert' : '/api/program/update'
})
const header = computed(() => {
  return saveMode.value === 'add' ? '添加应用' : '编辑应用'
})
const closeDialog = () => {
  saveDialogVisible.value = false
  imageUploadData.value = []
  downloadUploadData.value = []
  resetFormData()
}
const formRef = ref<any>(null)

const resetFormData = () => {
  formRef.value.reset({ type: 'initial' })
}

const confirmLoading = ref(false)

const submit = async () => {
  const result = await formRef.value.validate()
  if (result === true) {
    confirmLoading.value = true
    const response = await post(requestUrl.value, formData)
    confirmLoading.value = false
    MessagePlugin(response.status, response.message)
    if (response.status === 'success') {
      closeDialog()
      await getData()
    }
  }
}

const imageUploadSuccess = (params: any) => {
  formData.imageUrl = params.response.url
}
const imageUploadRemove = () => {
  formData.imageUrl = ''
}
const imageUploadFail = async () => {
  await MessagePlugin.error('文件上传失败！')
}

const downloadUploadSuccess = (params: any) => {
  formData.downloadUrl = params.response.url
}
const downloadUploadRemove = () => {
  formData.downloadUrl = ''
}
const downloadUploadFail = async () => {
  await imageUploadFail()
}
</script>

<template>
  <t-dialog
    :visible="saveDialogVisible"
    @close="closeDialog"
    :header="header"
    @confirm="submit"
    :confirm-btn="{ loading: confirmLoading }"
  >
    <t-row style="padding: 10px">
      <t-form
        ref="formRef"
        :data="formData"
        :rules="rules"
        :label-width="70"
        label-align="left"
        style="width: 100%"
      >
        <t-form-item label="应用名称" name="name">
          <t-input v-model="formData.name" placeholder="请输入应用名称" />
        </t-form-item>

        <t-form-item label="应用价格" name="price">
          <t-input v-model="formData.price" placeholder="请输入应用价格" />
        </t-form-item>

        <t-form-item label="应用上传" name="downloadUrl">
          <t-upload
            style="width: 100%"
            v-model="downloadUploadData"
            :action="actionUrl"
            :abridge-name="[8, 6]"
            theme="file-input"
            placeholder="未选择文件"
            @success="downloadUploadSuccess"
            @fail="downloadUploadFail"
            @remove="downloadUploadRemove"
            accept="application/x-zip-compressed"
            tips="仅支持上传zip格式的文件"
          ></t-upload>
        </t-form-item>

        <t-form-item label="应用封面" name="imageUrl">
          <t-upload
            style="width: 100%"
            v-model="imageUploadData"
            :action="actionUrl"
            :abridge-name="[8, 6]"
            theme="image"
            placeholder="未选择文件"
            @success="imageUploadSuccess"
            @fail="imageUploadFail"
            @remove="imageUploadRemove"
            accept="image/*"
          ></t-upload>
        </t-form-item>

        <t-form-item label="授权状态" name="status">
          <t-switch v-model="formData.status" :customValue="[1, 0]" />
        </t-form-item>

        <t-form-item label="验证周期" name="cycle">
          <t-input v-model="formData.cycle" placeholder="请输入验证周期，单位/h" />
        </t-form-item>

        <t-form-item label="应用描述" name="description">
          <t-textarea
            v-model="formData.description"
            placeholder="请输入应用描述"
            :autosize="{ minRows: 2, maxRows: 3 }"
          />
        </t-form-item>
      </t-form>
    </t-row>
  </t-dialog>
</template>
